<!--
 @description
 @fileName PopTree.vue
 @author zengqiongying
 @created 2022/02/25 13:44:42
-->
<template>
  <van-popup
    v-model:show="popupShow"
    class="custom-left-pop"
    position="left"
    :style="{ width: '70%',height:'100%' }"
    close-on-popstate
  >
    <list-menu
      v-model="categoryId"
      :data="treeData"
      value-key="id"
      label-key="categoryName"
      @clickItem="handleClickItem"
    />
  </van-popup>
</template>

<script>
import { getCategoryTree } from '@/apis/helpCenter'
import ListMenu from './ListMenu'
export default {
  name: 'HelpPopTree',
  components: {
    ListMenu
  },
  props: {
    // 选中的值，必传
    value: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      categoryId: '',
      treeData: []
    }
  },

  computed: {
    popupShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    value: {
      handler(val, oldVal) {
        this.categoryId = val
      },
      immediate: true
    },
    categoryId(val, oldVal) {
      this.$emit('input', val)
    }
  },

  created() {
    this.getData()
  },
  activated() {},

  mounted() {},

  methods: {
    getData() {
      getCategoryTree().then(res => {
        this.treeData = res.data || []
      })
    },
    handleClickItem(value) {
      this.$emit('clickItem', value)
    }
  }
}

</script>
<style lang='less' scoped>
.custom-left-pop{
  padding-top: 44PX;
  box-sizing: border-box;
  background: #F5F6F7;
}
</style>
